<template>
	<div class="mainua">
		<div class="main_spac1" style="padding-bottom:5px;">
			<div class="main_white padding10">
				<div class="main_crumbs boxdq">
					<div class="main_crumbs_l">
						<a href="javascript:;" @click="$router.back(-1)">
						<i class="el-icon-arrow-down"></i>返回
						</a>
						<em>|</em>
						<span>{{titleName}}</span>
					</div>
				</div> 
				<div class="main_tile boxdq marginTop10">
					<div class="main_tile_l"></div>
				</div>
				<div class="maincla_form">
					<el-form
						inline
						:model="form"
						:rules="rules"
						class="demo-form-inline"
						ref="form"
						label-width="110px"
					>
						<div class="clearfix"></div>
						<el-form-item label="上级菜单">
							<el-select v-model="firstId" placeholder="一级菜单" @change="selectAction($event,'firstId')">
								<el-option v-for="item in firstList" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
							<el-select v-model="secondId" placeholder="二级菜单" @change="selectAction($event,'secondId')">
								<el-option v-for="item in secondList" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
							<el-select v-model="thiredId" placeholder="三级菜单" @change="selectAction($event,'thiredId')">
								<el-option v-for="item in thiredList" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<div class="clearfix"></div>
						<el-form-item label="菜单名称" prop="name">
							<el-input v-model="form.name"></el-input>
						</el-form-item>
						<el-form-item label="控制器" prop="controller">
							<el-input v-model="form.controller"></el-input>
						</el-form-item>
						<div class="clearfix"></div>
						<el-form-item label="方法" prop="action">
							<el-input v-model="form.action"></el-input>
						</el-form-item>
						<el-form-item label="路由" prop="route">
							<el-input v-model="form.route"></el-input>
						</el-form-item>
						<div class="clearfix"></div>
						<el-form-item label="排序" prop="ordid">
							<el-input v-model="form.ordid"></el-input>
						</el-form-item>
						<el-form-item label="显示">
							<el-switch v-model="form.display"  :active-value="1"  :inactive-value="0" active-color="#03A98E"> </el-switch>
						</el-form-item>
						<div class="clearfix"></div>
						<el-form-item>
							<div class="btns">
								<el-button type="primary" @click="onSubmit">保存</el-button>
								<el-button @click="$router.back()">取消</el-button>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { menuListByPid ,addMenu,getMenuDetail,editMenu} from "@/api/global/menuConfig";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
export default {
	data() {
		var checkOrdid = (rule, value, callback) => {
			if (value>100) {
				return callback(new Error('排序数值过大'));
			}else{
				callback()
			}
		};
		return {
			titleName:'',
			firstList:[],
			secondList:[],
			thiredList:[],
			firstId:'',
			secondId:'',
			thiredId:'',
			form: {
				pid:'',
				name: '',
				controller:'',
				route:'',
				ordid:100,	//排序
				display:1,
				action:'',	//方法
				// type:'',
			},
			detail:null,	//储存编辑的详情
			rules: {
				name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' },],
				// controller: [{ required: true, message: '请输入控制器', trigger: 'blur' },],
				// action: [{ required: true, message: '请输入方法', trigger: 'blur' },],
				// route: [{ required: true, message: '请输入路由', trigger: 'blur' },],
				ordid: [
					// { required: true, message: '请输入排序', trigger: 'blur' },
					{ validator: checkOrdid, trigger: 'blur' }
				],
			}
		}
	},
	mounted(){
		var id = this.$route.query.id;
		if(id){
			this.titleName = '编辑菜单';
			this.getDetail(id);
		}else{
			this.titleName = '新增菜单';
			this.getSelectList('0',1);
		}
	},
    methods: {
		//获取菜单列表
		getSelectList(pid,lv){
			if(pid){
				let data = Object.assign(
					{sign: Md5(
						objKeySort(Object.assign(apiUrl().name), {pid,}) + apiUrl().appsecret
					),},
					apiUrl().name,
					{pid}
				);
				menuListByPid(data).then((res) => {
					if (res.errcode == 0) {
						if(lv == 1){
							this.form.display = 1;
							this.firstList =  res.data.list;
						}else if(lv==2){
							this.form.display = 1;
							this.secondList =  res.data.list;
						}else if(lv == 3){
							this.form.display = 0;
							this.thiredList =  res.data.list;
						}
					} else {
						this.$message.error(res.errmsg);
					}
				});
			}
			
		},
		//获取详情信息
		getDetail(id){
			let data = Object.assign(
				{sign: Md5(
					objKeySort(Object.assign(apiUrl().name), {id}) + apiUrl().appsecret
				),},
				apiUrl().name,
				{id}
			);
			getMenuDetail(data).then((res) => {
				if (res.errcode == 0) {
					let data = res.data;
					this.detail = data;
					let form = this.form;
					form.name = data.name;
					form.action = data.action;
					form.controller = data.controller;
					form.display = data.display;
					form.route = data.route;
					form.ordid = data.ordid;
					form.id = data.id;

					let list = data.p_menu_list;
					if(list.menu_list_1){
						this.firstList = list.menu_list_1 ;
						this.firstId =  data.active_pid[0];
					}
					if(list.menu_list_2){
						this.secondList = list.menu_list_2;
						this.secondId =  data.active_pid[1];
					}
					if(list.menu_list_3){
						this.thiredList = list.menu_list_3;
						this.thiredId =  data.active_pid[2];
					}
				} else {
					this.$message.error(res.errmsg);
				}
			});
		},
		selectAction(e,type){
				if(type=='firstId'){
					this.secondList = [];
					this.secondId = null;
					this.thiredList = [];
					this.thiredId = null;
					this.getSelectList(e,2);
				}
				else if(type=='secondId'){
					this.getSelectList(e,3);
				}
				this[type] = e;
		},
		onSubmit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.form.ordid==''? this.form.ordid = 100 : '';
					if(this.$route.query.id){
						//编辑
						var params = JSON.parse(JSON.stringify(this.form));
						var lv = this.thiredId ? this.thiredId : this.secondId ? this.secondId : this.firstId ? this.firstId : 0;
						params.pid = lv;
						let data = Object.assign(
							{sign: Md5(
								objKeySort(Object.assign(apiUrl().name), params) + apiUrl().appsecret
							),},
							apiUrl().name,
							params
						);
						editMenu(data).then((res) => {
							if (res.errcode == 0) {
								this.$message({
									message: "修改成功",
									type: "success",
								});
								this.$router.back()
							} else {
								this.$message.error(res.errmsg);
							}
						});
					}else{
						//新增
						var params = JSON.parse(JSON.stringify(this.form));
						var lv = this.thiredId ? this.thiredId : this.secondId ? this.secondId : this.firstId ? this.firstId : 0;
						params.pid = lv;
						let data = Object.assign(
							{sign: Md5(
								objKeySort(Object.assign(apiUrl().name), params) + apiUrl().appsecret
							),},
							apiUrl().name,
							params
						);
						addMenu(data).then((res) => {
							if (res.errcode == 0) {
								this.$message({
									message: "新增成功",
									type: "success",
								});
								this.$router.back()
							} else {
								this.$message.error(res.errmsg);
							}
						});
					}
						
				} else {
					return false;
				}
			});
		}
    }
}
</script>

<style lang="scss" scoped>
/deep/.el-form-item__content .el-input__inner{
	width:200px;
}
.btns{
	margin:20px 110px 0;
	button{
		margin-right:10px;
	}
}
</style>